<template lang="pug">
.cp-version-manage-popup
  el-dialog.version-pop(
    title="版本管理",
    :visible="visible",
    @close="closeDialog",
    width="50%")
    .trace-to-table
      .table-title
        el-button.right-btn(type="primary", size="mini", @click="addVersion") 新增版本
      el-table.version-pop-table(
        :data="versionList",
        @row-click="handleClickRow",
        :row-class-name="tableRowClassName",
        border,
        height="240px")
        el-table-column(show-overflow-tooltip, label="版本号")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.version}}
            el-input(v-show="scope.row.canEdit", v-model="scope.row.version")
        el-table-column(show-overflow-tooltip, prop="desc", label="版本描述")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.desc}}
            el-input(v-show="scope.row.canEdit", v-model="scope.row.desc")
        el-table-column(label="生效日期", min-width="120px")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.effective | day-format}}
            div.table-input-time(v-show="scope.row.canEdit")
              el-date-picker(v-model="scope.row.effective", type="date", :picker-options="startLimit", :disabled="disabledStart")
        el-table-column(label="失效日期", min-width="120px")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.expiration | day-format}}
            div.table-input-time(v-show="scope.row.canEdit")
              el-date-picker(v-model="scope.row.expiration", type="date", :picker-options="endLimit")
        el-table-column(label="操作", min-width="100px")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit && scope.row.fromAdd")
              i.icon-act.el-icon-edit(@click="editVersion(scope.$index, scope.row)")
              i.icon-act.el-icon-delete(@click="delVersion(scope.$index, scope.row)")
            div(v-show="scope.row.canEdit && scope.row.fromAdd")
              i.icon-act.el-icon-check(@click="saveEdit(scope.$index, scope.row)")
              i.icon-act.el-icon-close(@click="cancelEdit(scope.$index, scope.row)")
    .dialog-footer(slot="footer")
      el-button(type="primary", plain, @click="closeDialog") 取消
      el-button(type="primary", @click="saveData") 保存
</template>

<script>
export default {
  name: 'verssionpopup',
  props: {
    visible: Boolean,
    parentData: Object
  },
  data() {
    return {
      versionList: [],
      currentRow: null,
      disabledStart: false,
      startLimit: this.optionsStart(),
      endLimit: this.optionsEnd()
    };
  },
  watch: {
    parentData(newData, oldData) {
      if (newData !== oldData) {
        this.versionList = newData.versionList;
        this.currentRow = null;
        this.disabledStart = false;
      }
    }
  },
  methods: {
    // 当前行class
    tableRowClassName ({ row }) {
      if (this.currentRow && this.currentRow.version === row.version) {
        return 'focus-row';
      }
      return '';
    },
    // 点击一行
    handleClickRow(currentrow) {
      this.currentRow = currentrow;
    },
    // 关闭、取消
    closeDialog() {
      this.$emit('close');
    },
    // 保存
    saveData() {
      if (this.currentRow) {
        const params = {
          versionList: this.versionList,
          select: this.currentRow
        };
        this.$emit('submit', params);
        this.closeDialog();
      } else {
        this.$message.error('请选择版本');
      }
    },
    // 新增
    addVersion() {
      // 只能增加一条
      if (this.versionList[0] && this.versionList[0].fromAdd) {
        return;
      }
      if (this.versionList) {
        const item = { canEdit: true, fromAdd: true };
        // 有上一版本失效日期  时间必须连续
        if (this.versionList[0] && this.versionList[0].expiration) {
          this.disabledStart = true;
          const time = (new Date(this.versionList[0].expiration).getTime()) + (24 * 60 * 60 * 1000);
          item.effective = time;
        }
        this.versionList.unshift(item);
        this.versionListBC = this.versionList.slice();
      }
    },
    // 编辑
    editVersion(index) {
      if (this.versionList[1] && this.versionList[1].expiration) {
        this.disabledStart = true;
      }
      this.$set(this.versionList[index], 'canEdit', true);
      this.versionListBC = this.versionList.slice();
    },
    // 删除
    delVersion(index) {
      this.versionList.splice(index, 1);
      this.versionListBC.splice(index, 1);
    },
    // 保存编辑
    saveEdit(index, row) {
      const { version, effective, expiration } = row;
      if (!version) {
        this.$message.error('版本号不能为空');
        return false;
      }
      if (!effective) {
        this.$message.error('生效日期不能为空');
        return false;
      }
      if (!expiration) {
        this.$message.error('失效日期不能为空');
        return false;
      }
      this.versionList[index].canEdit = false;
    },
    // 取消编辑
    cancelEdit(index) {
      const cache = Object.assign({}, this.versionListBC[index], { canEdit: false });
      this.versionList.splice(index, 1, cache);
      this.versionList[index].canEdit = false;
    },
    // 设置不可选生效日期
    optionsStart() {
      const self = this;
      return {
        disabledDate (date) {
          // 可选失效日期前
          if (self.versionList[0] && self.versionList[0].expiration) {
            return date.getTime() > new Date(self.versionList[0].expiration).getTime();
          }
          return false;
        }
      };
    },
    // 设置不可选失效日期
    optionsEnd() {
      const self = this;
      return {
        disabledDate (date) {
          // 可选生效日期后
          if (self.versionList[0] && self.versionList[0].effective) {
            return date.getTime() < new Date(self.versionList[0].effective).getTime();
          }
          return false;
        }
      };
    }
  }
};
</script>

<style lang="sass">
.cp-version-manage-popup
  .el-table
    th, td
      text-align: center
  .el-table .focus-row td
    background: #f5f7fa
  .version-pop
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__body
      padding-top: 10px
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .table-title
    margin: 0 0 10px 0
    .right-btn
      padding-left: 16px
  .version-pop-table
    .table-input-time
      .el-date-editor.el-input, .el-date-editor.el-input__inner
        width: auto
      .el-input--prefix .el-input__inner
        padding-right: 0
    .icon-act
      font-size: 16px
      font-weight: 500
      padding: 4px
      cursor: pointer
      &:hover
        color: #5D9BFB
</style>
